You can use WPF Diagrams in three ways:

This section describes how to work with the standard diagram model.

The Diagram Class

A standard diagram is represented by the Diagram class. A diagram consists of a number of nodes and connections, represented by the DiagramNode (frequently ShapeNode) and DiagramConnection classes.

A Diagram is purely a data (model) object. It does not contain any WPF UI elements, and contains only minimal presentation information such as node positions and sizes. You can build up a diagram programmatically by adding items to its Nodes and Connections collections, or just create an empty (blank) diagram for your users to place items onto.

To display a diagram, use the DiagramSurface control. The DiagramSurface takes care of all presentation elements, optionally using a DiagramFormatter to control appearance and styling.

CopyCreating a blank diagram
this.DataContext = new Diagram();
CopyDisplaying a diagram
<ms:DiagramSurface Diagram="{Binding}" />

Nodes and Connections

The base Node type does not contain any information about layout or connectivity. This is provided through derived classes such as TitleNode or ShapeNode, and through templates referenced through the diagram formatter.

The base Connection type uses a default layout which the user can modify. Typically you will use derived types of Connection to specify features such as routing, styling, arrows, etc. through templates referenced through the diagram formatter.

For a step by step example of setting up and displaying a standard diagram, see the QuickStart.

Representing Your Business Objects as a Diagram

You can use Diagram as a model in itself, or you can use it as a view model over a business class. In the latter case, you will need to create adapter code to synchronise the model (business object) and view model (diagram model). The best approach in this case is to have the diagram observe the business object and update itself as the business object changes, but not vice versa. WPF Diagramming supports this by allowing you to map user actions (such as creating nodes and connections) to business object actions, thereby avoiding the need for two-way synchronisation.